<template>
  <div class="return_point_home">
    <c-title :hide="false" :text="activity_name"></c-title>
    <van-tabs v-model="active" @change="onchange">
      <van-tab title="商城商品" :name="0">
        <van-search @focus="to_return_point_child(0)" v-model="searchKey" placeholder="请输入内容" />
        <div class="gridBox">
          <div class="grid-item" v-for="item in category" :key="item" @click="to_return_point_child(item.id)">
            <img :src="item.thumb" alt="" class="itemImg" />
            <div class="gric-txt">{{ item.name }}</div>
          </div>
        </div>
        <div class="goodList">
          <div class="lis" v-for="item in listData" :key="item.id" @click="toGood(item)">
            <div class="lisImg">
              <img :src="item.thumb" alt="" />
            </div>
            <div class="lis_b">
              <div class="lis_b_t">{{ item.title }}</div>
              <div class="lis_b_c" v-if="item.goods_tags.length > 0">
                <div class="lis_b_c_tag" v-for="(items, index) in item.goods_tags" :key="index">{{ items }}</div>
              </div>
              <div class="lis_b_b">{{ $i18n.t("money") }}{{ item.price }}</div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="门店商品" :name="1">
        <div class="storeBox">
          <div class="storeSearch">
            <div class="storeSearch_l" @click="locationTo">
              <i class="iconfont icon-dizhi1"></i>
              <div class="addressName">{{ city ? city : "全国" }}</div>
            </div>
            <van-search @focus="to_return_point_child(0)" v-model="searchKey" placeholder="请输入内容" />
          </div>
          <div class="gridBox" v-if="category.length > 0">
            <div class="grid-item" v-for="item in category" :key="item" @click="to_return_point_child(item.id)">
              <img :src="item.thumb" alt="" class="itemImg" />
              <div class="gric-txt">{{ item.name }}</div>
            </div>
          </div>
          <div class="goodList">
            <div class="lis" v-for="item in listData" :key="item.id" @click="toGood(item)">
              <div class="lisImg">
                <img :src="item.thumb" alt="" />
              </div>
              <div class="lis_b">
                <div class="lis_b_t">{{ item.title }}</div>
                <div class="lis_b_c" v-if="item.goods_tags.length > 0">
                  <div class="lis_b_c_tag" v-for="(items, index) in item.goods_tags" :key="index">{{ items }}</div>
                </div>
                <div class="lis_b_b">
                  <div class="lis_b_b_price">{{ $i18n.t("money") }}{{ item.price }}</div>
                  <div class="lis_b_b_distance" v-if="item.distance">{{ item.distance }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      searchKey: "",
      category: [],
      activity_name: "",
      point: {
        lat: "",
        lng: ""
      },
      city: "",

      listData: [],
      page: 1, //分页数，当前页数
      isLoadMore: true, //判断是否要加载更多的标志
      total_page: 0 //总页数
    };
  },
  activated() {
    if (this.active == 1) {
      this.init();
      this.category = [];
      this.fun
        .getLocation("")
        .then(res => {
          console.log(res, "定位数据qqqqqqqqq");
          this.city = res.city ? res.city : "全国";
          this.point = res.point;
          this.getData();
        })
        .catch(err => {
          console.log(err, "定位数据errerr");
          this.init();
          this.getData();
        });
      return;
    }
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.listData = [];
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
    },
    locationTo() {
      this.$store.commit("setReferer", window.location.href);
      this.$router.push(this.fun.getUrl("o2oLocation", {}, {}));
    },
    to_return_point_child(id = 0) {
      let queryJson = { pageName: this.activity_name };
      if (id) {
        if (this.active == 1) {
          queryJson.storeTag = 1;
        }
        this.$router.push(this.fun.getUrl("return_point_child", { id: id }, queryJson));
        return;
      } else {
        queryJson.activity_id = this.$route.params.id;
        if (this.active == 1) {
          queryJson.storeTag = 1;
        }
        this.$router.push(this.fun.getUrl("return_point_child", {}, queryJson));
      }
    },
    toGood(item) {
      this.$router.push(this.fun.getUrl("goods", { id: item.goods_id }, { return_point_id: item.return_point_id }));
    },
    onchange() {
      if (this.active == 1) {
        this.init();
        this.category = [];
        this.fun
          .getLocation("")
          .then(res => {
            console.log(res, "定位数据qqqqqqqqq");
            this.city = res.city ? res.city : "全国";
            this.point = res.point;
            this.getData();
          })
          .catch(err => {
            console.log(err, "定位数据errerr");
            this.init();
            this.getData();
          });
        return;
      }
      this.init();
      this.getData();
    },
    async getData() {
      let json = {
        activity_id: this.$route.params.id,
        cate_type: this.active
      };
      if (this.active == 1) {
        json.lat = this.point.lat;
        json.lng = this.point.lng;
      }
      let { data, msg, result } = await $http.post("plugin.return-point.frontend.activity.index", json, "");
      if (result) {
        this.category = data.category;
        this.listData = data.goods_list.data;
        this.total_page = data.goods_list.last_page;
        this.isLoadMore = true;
        if (data.activity_name) {
          this.activity_name = data.activity_name;
          this.fun.setWXTitle(data.activity_name);
        }
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page: this.page,
          activity_id: this.$route.params.id,
          cate_type: this.active
        };
        let { data, msg, result } = await $http.post("plugin.return-point.frontend.activity.index", json, ".");
        this.isLoadMore = true;
        if (result) {
          this.listData = this.listData.concat(data.data);
        } else {
          this.$toast(msg);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.storeBox {
  .lis_b_b {
    display: flex;
    justify-content: space-between;
    .lis_b_b_distance {
      font-weight: 400;
      font-size: 0.81rem;
      color: #999999;
    }
  }
  .storeSearch {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0.38rem 0.75rem;
    .storeSearch_l {
      flex-shrink: 0;
      width: 7.44rem;
      display: flex;
      align-items: center;
      font-size: 0.81rem;
      color: #333333;
      .icon-dizhi1 {
        margin-right: 0.22rem;
      }
    }
    .van-search {
      flex: 1;
      padding: 0;
    }
  }
}

.gridBox {
  background: #fff;
  border-radius: 0.5rem;
  margin: 0.63rem 0.75rem;
  padding: 0.94rem 0.75rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 3.25rem 3.25rem 3.25rem 3.25rem 3.25rem;
  grid-column-gap: 1.06rem;
  grid-row-gap: 0.75rem;
  .grid-item {
    .itemImg {
      width: 3.25rem;
      height: 3.25rem;
      background: #f8f8f8;
      margin: 0;
      border-radius: 50%;
    }
    .gric-txt {
      font-size: 0.75rem;
      margin-top: 0.5rem;
    }
  }
}
.goodList {
  display: grid;
  grid-template-columns: 10.66rem 10.66rem;
  grid-column-gap: 0.63rem;
  grid-row-gap: 0.63rem;
  margin: 0.63rem 0.75rem;
  .lis {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 0.75rem;
    .lisImg {
      flex-shrink: 0;
      width: 10.66rem;
      height: 10.66rem;
      background: #c1c1c1;
      border-radius: 0.75rem 0.75rem 0 0;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.75rem 0.75rem 0 0;
      }
    }
    .lis_b {
      flex: 1;
      min-height: 6.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.63rem 0.75rem 0.75rem 0.75rem;
      overflow: hidden;
      text-align: left;
      .lis_b_t {
        font-weight: bold;
        font-size: 0.81rem;
      }
      .lis_b_c {
        font-size: 0.81rem;
        display: flex;
        flex-wrap: wrap;
        .lis_b_c_tag {
          margin-right: 0.1875rem;
        }
      }
      .lis_b_b {
        font-weight: 500;
        font-size: 0.94rem;
        color: #f15353;
      }
    }
  }
}
</style>
